<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组织机构列表</title>
    <link th:replace="template/sys_header :: header"/>
</head>
<body>

<div class="tree_left">
    <ul id="orgTree" class="ztree"></ul>
</div>
<div class="tree_right padding10">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" id="orgName" name="orgName" placeholder="请输入组织机构名称"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" data-type="getCheckData" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除
                        </button>
                        <button class="layui-btn" onclick="add()"><i class="layui-icon">&#xe61f;</i>添加组织</button>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-hide" id="orgTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/html" id="operateTpl">
    <a class="layui-btn layui-btn-primary layui-btn-xs" title="查看" onclick="edit('{{d.orgId}}')" href="javascript:;">
        <i class="layui-icon">&#xe63c;</i>查看 &nbsp;
    </a>
    <a class="layui-btn layui-btn-xs" title="编辑" onclick="edit('{{d.orgId}}')" href="javascript:;">
        <i class="layui-icon">&#xe642;</i>编辑&nbsp;
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" title="删除" onclick="del(this,'{{d.orgId}}')" href="javascript:;">
        <i class="layui-icon">&#xe640;</i>删除
    </a>
</script>

<script type="text/javascript" th:replace="template/sys_header :: footer"></script>
<script type="text/javascript" th:inline="javascript">
    var table = layui.table, $ = layui.jquery, form = layui.form;
    var treeDatas = [[${orgTrees}]];//服务端的所有组织机构信息
    //定义全局变量
    var zTree, tableIns, selectTreeId = "";
    $(function () {
        //初始化树
        initTree();

        //加载列表 - 默认加载第一个节点数据
        initTable();
    });

    //默认展开并选中第一个节点，列表加载选中节点的数据
    function initTree() {
        zTree = $.fn.zTree.init($("#orgTree"), {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //菜单点击事件
                onClick: function (event, treeId, treeNode) {
                    selectTreeId = treeNode.id;
                    searchTable();
                    return false;
                }
            }
        }, treeDatas);

        var firstNode = zTree.getNodes()[0];
        zTree.selectNode(firstNode);//选择点
        zTree.expandNode(firstNode, true);
        selectTreeId = firstNode.id;
        //zTree.setting.callback.onClick(null, zTree.setting.treeId, firstNode);
    }

    function initTable() {
        tableIns = new DataTable({
            elem: '#orgTable',
            url: 'sys/organization/pageList', //数据接口
            where: {parentId: selectTreeId},
            cols : [{
                type: 'checkbox'
            }, {
                field: 'orgName', title: '组织机构名称', align: 'center'
            }, {
                field: 'orgShortName', title: '组织机构简称', align: 'center'
            }, {
                field: 'orderNum', title: '排序', width: 120, sort: true
            }, {
                field: 'createTime', title: '创建时间', width: 180, align: 'center', templet: function (d) {
                    return new Date(d.createTime).Format("yyyy-MM-dd hh:mm:ss");
                }
            }, {
                field: 'operate', title: '操作', width: 230, toolbar: '#operateTpl', align: 'left', unresize: true
            }]
        })

        console.log(tableIns)
        //监听表格复选框选择
        //table.on('checkbox(orgTable)', function(obj){
        //    console.log(obj)
        //});

        //监听查询按钮
        form.on('submit(search)', function (data) {
            searchTable();
            return false;
        });
    }
    //查询-重载表格
    function searchTable() {
        var orgName = getById("orgName").value;
        table.reload(tableIns.getTableId(), {
            where: {
                orgName: orgName,
                parentId: selectTreeId
            }, page: {
                pageIndex: 1 //重新从第 1 页开始
            }
        })
    }

    /*删除*/
    function del(obj, id) {
        layer.confirm('确认要删除吗？', {icon : 3} ,function (index) {
            //发异步删除数据
            new AjaxRequest({
                type: "POST",
                url: webroot + "sys/organization/delete?orgId=" + id,
                isShowLoader: true,
                success: function (res) {
                    if (res.resultCode == "0000") {
                        //删除tree节点 , 找到被删除的节点调用tree的删除方法
                        var nodes = zTree.getSelectedNodes(), treeNode = nodes[0];
                        var childrens = treeNode.children;
                        for (var i = 0; i < childrens.length; i++) {
                            if (childrens[i].id == id) {
                                zTree.removeNode(childrens[i], true);
                            }
                        }
                        //删除列表
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', { icon: 1, time: 2000 });
                    } else {
                        layer.alert(res.resultMessage, {icon: 2})
                    }
                }
            });
        });
    }

    //批量删除
    function delAll() {
        var checkStatus = table.checkStatus(tableIns.getTableId()), data = checkStatus.data;
        if (data.length > 0) {
            layer.confirm('确认要删除吗？', {icon: 3} , function (index) {
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].orgId)
                }
                var id = ids.join(",").toString();
                new AjaxRequest({
                    type: "POST",
                    url: webroot + "sys/organization/deleteBatch?orgIds=" + id ,
                    isShowLoader: true,
                    success: function (res) {
                        if (res.resultCode == "0000") {
                            layer.alert('删除成功');
                            //删除tree节点
                            var nodes = zTree.getSelectedNodes(), treeNode = nodes[0];
                            var childrens = treeNode.children;
                            for (var i = 0; i < childrens.length; i++) {
                                for(var j=0; j < ids.length ; j++){
                                    if (childrens[i].id == ids[j]) {
                                        zTree.removeNode(childrens[i], true);
                                    }
                                }
                            }
                            //找到所有被选中的，进行删除
                            $(".layui-table-body .layui-form-checked").parents('tr').remove();
                        } else {
                            layer.alert(res.resultMessage, {icon: 2})
                        }
                    }
                });
            });
        }else {
            layer.alert("请选择要删除的项", {icon: 2})
        }
    }

    //编辑与新增时把选中的组织机构节点传到弹出层页面
    function edit(orgId) {
        var nodes = zTree.getSelectedNodes(), treeNode = nodes[0];
        var parentId = treeNode.id;
        var parentOrgName = encodeURIComponent(treeNode.name);
        xadmin.open('编辑组织机构', '/sys/organization/edit?orgId=' + orgId + '&parentId=' + parentId + '&parentOrgName=' + parentOrgName, 850, 500)
    }

    function add() {
        var nodes = zTree.getSelectedNodes(), treeNode = nodes[0];
        var parentId = treeNode.id;
        var parentOrgName = encodeURIComponent(treeNode.name);
        xadmin.open('新增组织机构', '/sys/organization/edit?parentId=' + parentId + '&parentOrgName=' + parentOrgName, 850, 500)
    }

    //编辑或新增后，调用此方法刷新树与列表
    function refreshlist(orgId, orgName, isAdd) {
        //刷新树
        var nodes = zTree.getSelectedNodes(), treeNode = nodes[0];
        if (isAdd) {
            zTree.addNodes(treeNode, {id: orgId, pId: treeNode.id, name: orgName});
        } else {
            var childrens = treeNode.children;
            for (var i = 0; i < childrens.length; i++) {
                if (childrens[i].id == orgId) {
                    childrens[i].name = orgName;
                    zTree.updateNode(childrens[i], true);
                }
            }
        }
        //刷新列表
        searchTable();
    }
</script>
</body>
</html>